<template>
  <div class="tag-edit">
    <!--{{searchTag.tagTitle}}、、-->
    <!--{{tagPrivateList}}-->
    <el-dialog class="tagEditDialog" ref="tagEditDialog" :visible.sync="editTagsVisible">
      <el-table
        :data="tagPrivateList"
        max-height="500"
        style="width: 100%">
        <el-table-column
          v-if="false"
          prop="id"
          label="id">
          <template slot-scope="scope">
            <el-input style="width: 90%" :disabled="true" v-model="scope.row.id"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          v-if="false"
          prop="group_id"
          label="group_id">
          <template slot-scope="scope">
            <el-input style="width: 90%" :disabled="scope.row.group_id !== searchTag.tagTitle"
                      v-model="scope.row.bp_id"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="tag_name"
          :label="$t('searchLight.CompanyTag.TagName')">
          <template slot-scope="scope">
            <el-input style="width: 90%" size="mini"
                      :disabled="scope.row.creator !== username || scope.row.group_id !== searchTag.tagTitle"
                      v-model="scope.row.tag_name" @change="tagCheck(scope.$index, scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="tag_desc"
          :label="$t('searchLight.CompanyTag.TagDesc')">
          <template slot-scope="scope">
            <el-input style="width: 90%" size="mini"
                      :disabled="scope.row.creator !== username || scope.row.group_id !== searchTag.tagTitle"
                      v-model="scope.row.tag_desc"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="tag_weight"
          :label="$t('searchLight.CompanyTag.TagWeight')">
          <template slot-scope="scope">
            <el-rate
              :colors="['#8b3df6','#8b3df6','#8b3df6']"
              :disabled="scope.row.creator !== username || scope.row.group_id !== searchTag.tagTitle"
              v-model="scope.row.tag_weight">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="tag_weight"
          :label="$t('searchLight.CompanyTag.Publish')">
          <template slot-scope="scope">
            <el-checkbox :disabled="scope.row.creator !== username || scope.row.group_id !== searchTag.tagTitle"
                         v-model="scope.row.publish">
            </el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          width="80"
          prop="creator"
          :label="$t('searchLight.CompanyTag.Creator')">
        </el-table-column>
        <el-table-column
          width="100"
          prop="create_time"
          :label="$t('searchLight.CompanyTag.CreateTime')">
        </el-table-column>
        <el-table-column
          width="100"
          prop="update_time"
          :label="$t('searchLight.CompanyTag.UpdateTime')">
        </el-table-column>
        <el-table-column
          :label="$t('searchLight.CompanyTag.Operation')"
          width="80">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              round plain
              :disabled="scope.row.creator !== username || scope.row.group_id !== searchTag.tagTitle"
              @click="tagDelete(scope.$index, scope.row)">{{$t('searchLight.CompanyTag.Delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" round plain
                   @click="addTag">{{$t('searchLight.CompanyTag.Add')}}</el-button>
        <el-button size="mini" type="success" round plain
                   @click="tagSave">{{$t('searchLight.CompanyTag.Save')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog class="dialog" :visible.sync="outerVisible" top="5vh">
      <!-- <el-dialog
        width="30%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body>
      </el-dialog> -->
      <div class="dataSource">
        <!-- <h3 class="title"><img src="./images/737.png">{{$t('FAQ.customer.title')}}</h3> -->
        <div class="Data-one" v-for="item in $t('searchFAQ.question')">
          <p class="questes">
            <!--   <img src="./images/F.png" alt=""> -->
            <img src="~views/Reference/images/737.png" style="margin-bottom:7px;"><span>{{item.q}}</span>
          </p>
          <div class="flex-wrapper">
            <div><!-- <img src="./images/Q.png" alt=""> --></div>
            <div>
              <!-- <img src="../../views/functional/images/Q.png" style="position: relative;margin-top:3px;float:left;"> -->
              <span v-html="item.a"></span><br>
              <ul v-for="items in item.b">
                <li v-html="items.aList"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="dataSource">
        <!--    <h3 class="title"><img src="../../views/functional/images/737.png">{{$t('FAQ.customerValue.question.logical.label1')}}</h3> -->
        <div class="Data-one">
          <p class="questes">
            <img src="~views/Reference/images/737.png" alt="" style="margin-bottom:7px;"><span>{{$t('FAQ.customerValue.question.logical.label1')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><!-- <img src="./images/Q.png" alt=""> --></div>
            <div>
              <!--          <span>{{$t('FAQ.customerValue.question.logical.label1')}}</span><br> -->
              <span>{{$t('FAQ.customerValue.question.logical.statisTime')}}</span><br>
              <span>{{$t('FAQ.customerValue.question.logical.distri')}}</span><br>
              <span>{{$t('FAQ.customerValue.question.logical.rent')}}</span><br>
              <span>{{$t('FAQ.customerValue.question.logical.label2')}}</span><br>
              <!--<img src="~views/Reference/images/logiczh.png" width="600"-->
                   <!--v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'zh'">-->
              <!--<img src="~views/Reference/images/logicen.png" width="600"-->
                   <!--v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'en'">-->

              <img src="~views/Reference/images1/FAQ-1_03.png" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'en'" width="930">
              <img src="~views/Reference/images1/FAQ_ch.png" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'zh'" width="930">
              <!--      <ul>
                     <li>{{$t('FAQ.customerValue.question.logical.statisTime')}}</li>
                     <li>{{$t('FAQ.customerValue.question.logical.distri')}}</li>
                     <li>{{$t('FAQ.customerValue.question.logical.rent')}}</li>
                   </ul> -->
            </div>
          </div>
          <div class="flex-wrapper">
            <div><!-- <img src="./images/Q.png" alt=""> --></div>
            <div>
              <span>{{$t('FAQ.customerValue.question.rfm.label')}}</span><br>
              <span>{{$t('FAQ.customerValue.question.rfm.statisTime')}}</span><br>
              <!--<img src="~views/Reference/images/RFMzh.png" width="100%"-->
                   <!--v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'zh'">-->
              <!--<img src="~views/Reference/images/RFMen.png" width="100%"-->
                   <!--v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'en'">-->

              <img src="~views/Reference/images1/FAQ_03.png" alt="" v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'en'" width="930" >
              <img src="~views/Reference/images1/FAQ-1_ch.png" alt="" v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'zh'" width="930">
              <!--      <ul>
                     <li>{{$t('FAQ.customerValue.question.logical.statisTime')}}</li>
                     <li>{{$t('FAQ.customerValue.question.logical.distri')}}</li>
                     <li>{{$t('FAQ.customerValue.question.logical.rent')}}</li>
                   </ul> -->
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <!--     <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button> -->
      </div>
    </el-dialog>
    <div class="company-tag">
      <!--<tag></tag>-->
      <!--<span class="span-fathre" v-for="(item, index) in searchTag.tagShow" style="margin-bottom: 5px; cursor: pointer;" :title="searchTag.tagTips[index]"><span>{{item}}</span></span>-->
      <span class="span-fathre" v-for="(item, index) in searchTag.tagShow"
            style="margin-bottom: 5px; cursor: pointer;">
                <el-tooltip :content="searchTag.tagTips[index]" placement="top-start">
                  <span>{{item}}</span>
                </el-tooltip>
              </span>
      <span class="span-fathre" v-for="(item, index) in tagPrivateList"
            style="margin-bottom: 5px; cursor: pointer;">
                <el-tooltip :content="item.tag_desc" placement="top-start" v-if="item.tag_desc">
                  <span>{{item.tag_name}}</span>
                </el-tooltip>
                <span v-if="!item.tag_desc">{{item.tag_name}}</span>
              </span>
      <!--<i class="el-icon-edit-outline" style="cursor:pointer;color:#1e90ff;" @click="editTagsVisible = true"></i>-->
      <i class="icon iconfont icon-xinxi" style="color:#1e90ff;" @click="outerVisible = true"></i>
    </div>
  </div>

</template>

<script>
  import {getUsername} from '../../../../utils/auth'
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        username: getUsername(),
        tagPrivateList: [],
        editTagsVisible: false,
        outerVisible: false, // 控制dialog的显示和隐藏
        searchTag: {
          bpNumber: '',
          tagTitle: '',
          tagsPrivate: [],
          tagsPrivateTips: [],
          tagShow: [],
          tagShowZh: [],
          tagShowEn: [],
          tagTips: [],
          tagTipsZh: [],
          tagTipsEn: [],
          website: '',
          tagNumber: '',
          handleWebsite: ''
        },
        search_value: '',
        result_flag: ''
      }
    },
    computed: {
      ...mapGetters(['language', 'sidebar'])
    },
    methods: {
      getCommonTag() {
        const _this = this
        let params = {
          search_value: this.search_value,
          flag: this.result_flag,
          bp_name: this.searchTag.tagTitle
        }
        console.log(params)
        this.axios.post('/search/getProfile.do', params).then(response => {
          if (response.status === 200) {
            var resData = response.data.data
            // console.log(resData.rows[0])
            var item = []
            let filterRows = resData.rows[0].filter(item => item.zhName !== '')
            // console.log(filterRows)
            // let filterRowsArr = filterRows.map(item => item.name)
            let filterRowsArrZh = filterRows.map(item => item.zhName)
            let filterRowsArrEn = filterRows.map(item => item.enName)
            let filterRowsZh = filterRows.map(item => item.zhTips)
            let filterRowsEn = filterRows.map(item => item.enTips)
            // console.log('哈哈')
            // console.log(filterRowsZh)
            _this.searchTag.tagShowZh = filterRowsArrZh
            _this.searchTag.tagShowEn = filterRowsArrEn
            _this.searchTag.tagTipsZh = filterRowsZh
            _this.searchTag.tagTipsEn = filterRowsEn
            // console.log('哈哈')
            // console.log(_this.searchTag.tagTipsZh)
            // 初始化汉化tags
            if (_this.language === 'en') {
              // _this.datadata = 'haha'
              // console.log('英语')
              _this.searchTag.tagTips = _this.searchTag.tagTipsEn
              _this.searchTag.tagShow = _this.searchTag.tagShowEn
            } else if (_this.language === 'zh') {
              // _this.datadata = '哈哈'
              // console.log('中文')
              _this.searchTag.tagTips = _this.searchTag.tagTipsZh
              _this.searchTag.tagShow = _this.searchTag.tagShowZh
            }
          }
        })
      },
      async getTags() {
        let params = {
          flag: this.result_flag,
          group_id: this.searchTag.tagTitle,
          bp_id: this.searchTag.bpNumber || ''
        }
        // let res_bp = await this.axios.post('/CbiFunction/CbiFuncTagsByBpid', params)
        let res = await this.axios.post('/CbiFunction/CbiFuncTagQury', params)
        let data = res.data.data[0].tags
        // let data_bp = res_bp.data.data[0].tags
        // console.log(res_bp)
        // this.tagPrivateList = data_bp.concat(data)
        this.tagPrivateList = data
      },
      addTag() {
        const _this = this
        const lastTag = this.tagPrivateList.length > 1 ? this.tagPrivateList[this.tagPrivateList.length - 1] : ''
        console.log(lastTag.tag_name)
        if (!this.tagPrivateList.some(item => item.tag_name === '' || item.tag_name === lastTag.tag_name)) {
          this.tagPrivateList.push({
            pid: null,
            id: null,
            tag_name: '',
            tag_desc: '',
            tag_weight: 0,
            publish: false,
            creator: getUsername(),
            create_time: '',
            update_time: '',
            flag: this.result_flag,
            group_id: this.searchTag.tagTitle,
            bp_id: this.searchTag.bpNumber || ''
          })
        } else {
          this.$alert(_this.$t('searchLight.CompanyTag.TagFinish'), _this.$t('searchLight.CompanyTag.AlertTip'))
        }
      },
      async tagSave() {

        let updateTags = []
        let addTags = []
        for (let i in this.tagPrivateList) {
          if (this.tagPrivateList[i].id) {
            updateTags.push(this.tagPrivateList[i])
          } else {
            if (this.tagPrivateList[i].tag_name) {
              addTags.push(this.tagPrivateList[i])
            } else {
              this.tagPrivateList.splice(i, 1)
            }
          }
        }
        let checkRes = await this.axios.post('http://10.116.30.205:9090/CbiFunction/CbiFuncTagsInsertcheck', addTags)
        console.log(checkRes.data.data[0].resoult)
        if (checkRes.data.data[0].resoult) {
          let repeatTag = []
          for (let i in checkRes.data.data[0].resoult) {
            alert(`${checkRes.data.data[0].resoult[i].tag_name}重复`)
            repeatTag.push(checkRes.data.data[0].resoult[i].tag_name)
          }
        }
          try {
            let resAdd = await this.axios.post('/CbiFunction/CbiFuncTagsInsert', addTags)
            let tagUpdate = await this.axios.post('/CbiFunction/CbiFuncTagsUpdate', updateTags)
            // this.getTags()
            this.$message({
              type: 'success',
              message: 'success!'
            })
            this.editTagsVisible = false
          } catch (err) {
            this.$message({
              type: 'danger',
              message: 'save failed!'
            })
            this.getTags()
          }
        // let res = await this.axios.post('http://10.116.30.205:9090/CbiFunction/CbiFuncTagsInsert',this.tagPrivateList)
        // let data = res.data.data
      },
      async tagDelete(index, row) {
        const _this = this
        try {
          await this.$confirm(_this.$t('searchLight.CompanyTag.TagDelete'), _this.$t('searchLight.CompanyTag.AlertTip'), {
            confirmButtonText: _this.$t('searchLight.CompanyTag.OK'),
            cancelButtonText: _this.$t('searchLight.CompanyTag.Cancel'),
            type: 'warning'
          })
          if (row.id) {
            let res = await this.axios.delete(`/CbiFunction/CbiFuncTagsDelete/${row.id}`)
            if (res.data.status == 200) {
              this.getTags()
              this.$message({
                type: 'success',
                message: _this.$t('searchLight.CompanyTag.DeleteSuccess')
              })
            } else {
              this.$message({
                type: 'danger',
                message: _this.$t('searchLight.CompanyTag.DeleteFailed')
              })
            }
          } else {
            this.tagPrivateList.splice(index, 1)
          }

        } catch (err) {
          this.$message({
            type: 'info',
            message: _this.$t('searchLight.CompanyTag.CancelDelete')
          })
        }

        console.log(tip)

        //   .then(() => {
        //   _this.tagPrivateList.splice(index, 1)
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   });
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   });
        // });
      },
      getUrlParams() {
        this.show = this.$route.query.show
        this.search_value = this.$route.query.search_value
        this.result_flag = this.$route.query.result_flag
        // console.log('这是flag')
        // console.log(this.result_flag)
        // console.log('这是搜索值')
        // console.log(this.search_value)
        this.searchTag.tagTitle = this.$route.query.resultTitle
        this.searchTag.bpNumber = this.$route.query.bpNumber
        //claim表格总记录
      },
      async tagCheck(index, row) {
        if (!row.id) {
          // let res = await this.axios.post('http://10.116.30.205:9090/CbiFunction/CbiFuncTagsInsertcheck', [row])
          // console.log(res.data.data)
        }
      }
    },
    mounted() {
      this.getUrlParams()
      this.getCommonTag()
      this.getTags();
    },
    watch: {
      'editTagsVisible': function (n) {
        if (n == false) {
          this.getTags()
        }
      },
      language(n) {
        // console.log(n)
        if (n === 'en') {
          // this.datadata = 'haha'
          this.searchTag.tagTips = this.searchTag.tagTipsEn
          this.searchTag.tagShow = this.searchTag.tagShowEn
        } else if (n === 'zh') {
          // this.datadata = '哈哈'
          this.searchTag.tagTips = this.searchTag.tagTipsZh
          this.searchTag.tagShow = this.searchTag.tagShowZh
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .company-tag {
    /*margin-top: 10px;*/
    padding-bottom: 5px;
    /*font: 14px Helvetica Regular;*/
    font-size: 12px;
    color: #fff;
    .span-fathre {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      padding: 0 15px;
      /*border-radius: 15px;*/
      /*margin-right: 15px;*/
      border-radius: 3px;
      margin-right: 20px;
      /*background-color: #7f21e0;*/
      background-color: #ff9966;
      /*font-weight: bold;*/
    }
    /*.span-fathre:nth-child(1) {*/
    /*background-color: #42da92;*/
    /*!*background-color: #00ce05;*!*/
    /*!*background-color: #a2fd3e;*!*/
    /*}*/
    /*.span-fathre:nth-child(2) {*/
    /*background-color: #62affd;*/
    /*!*background-color: #1e90ff;*!*/
    /*!*background-color: #8bd9ff;*!*/
    /*}*/
    /*.span-fathre:nth-child(3) {*/
    /*background-color: #ff957f;*/
    /*!*background-color: #f17c68;*!*/
    /*!*background-color: #ffc4bd;*!*/
    /*}*/
    /*.span-fathre:nth-child(4) {*/
    /*background-color: #ff94d8;*/
    /*!*background-color: #ffbf00;*!*/
    /*!*background-color: #ffee8b;*!*/
    /*}*/
    /*.span-fathre:nth-child(5) {*/
    /*background-color: #c77ef4;*/
    /*!*background-color: #fd60af;*!*/
    /*!*background-color: #ff99cc;*!*/
    /*}*/
    /*.span-fathre:nth-child(6) {*/
    /*background-color: #f7c572;*/
    /*}*/
    /*.span-fathre:nth-child(7) {*/
    /*background-color: #f772a1;*/
    /*}*/
    /*.span-fathre:nth-child(8) {*/
    /*background-color: #728bf7;*/
    /*}*/
    /*.span-fathre:nth-child(9) {*/
    /*background-color: #72f7d6;*/
    /*}*/
    /*.span-fathre:nth-child(10) {*/
    /*background-color: #9172f7;*/
    /*}*/
  }

  .dataSource {
    width: 100%;
    // background-color: #FCFCFC;
    // margin-bottom: 20px;
    // padding: 10px 15px;
    // border-radius: 5px;
    // box-shadow: 1px 2px 5px #cccccc;
    .questes {
      font-family: "MicrosoftYaHei[Regular]";
      color: #333333;
      font-size: 18px;
      padding-top: 15px;
      margin-bottom: 5px;
      margin: 0px;
      color: #53ADEB;
      img {
        vertical-align: bottom;
        margin-right: 5px;

      }
    }
    .flex-wrapper {
      display: flex;
      margin-top: 5px;
      font-family: "MicrosoftYaHei[Regular]";
      /* color: #959595;*/
      color: #666;
      font-size: 15px;
      div:nth-of-type(1) {
        margin-right: 10px;
        margin-top: 5px;
      }
      div:nth-of-type(2) {
        line-height: 25px;
      }
    }
  }
</style>
